<template>
	<div>
		<Panle title='存储方式' content="文件存储在本地服务器，请确保服务器的 /uploads/ 目录有写入权限"></Panle>
		<div class="set-content">
			<el-tabs type="border-card" >
			   <el-tab-pane label="本地配置">
				   <el-form :model="form" :rules="rules" ref="form"  class="tabform" label-position="left" label-width="120px" >
					   <el-row>
					       <el-col :span="24">
							   <el-form-item label="存储位置" prop="farea">
							   <el-checkbox-group v-model="form.farea">
							     <el-checkbox :label="1">本地</el-checkbox>
							     <el-checkbox :label="2">七牛云</el-checkbox>
							     <el-checkbox :label="3">阿里云</el-checkbox>
							     <el-checkbox :label="4">腾讯云</el-checkbox>
							   </el-checkbox-group>
							   </el-form-item>
						   </el-col>
						  
						</el-row>
						 <el-row>
						<el-col :span="12">
						  <el-form-item label="AllowExts" prop="allowexts">
						     <el-input v-model="form.allowexts" size="mini" placeholder="设置系统允许上传文件的后缀，多个以英文逗号隔开。如：png,jpg,rar,doc"></el-input>
						  </el-form-item>
						</el-col> 
						</el-row> 
						<el-row>
						<el-col :span="12">
						   <el-form-item label="FileSize" prop="fileSize">
						     <el-input v-model="form.fileSize" size="mini" placeholder="设置系统允许上传文件的大小"></el-input>
						   </el-form-item>
						  </el-col>
						  </el-row> 
						
				   </el-form>
				   
				   
			   </el-tab-pane>
			   <el-tab-pane label="七牛云配置">
				   
				    <el-form :model="form"  class="tabform" label-position="left" label-width="120px" >
						 <el-row>
						 <el-col :span="12">
						 <el-form-item label="空间名称" >
						   <el-input v-model="form.q_oss" size="mini" placeholder="填写七牛云存储空间名称，如：static"></el-input>
						 </el-form-item>
						 </el-col>
						 </el-row>
						 
						 <el-row>
						 <el-col :span="12">
						 <el-form-item label="访问域名" >
						       <el-input v-model="form.q_http" size="mini" placeholder="填写七牛云存储访问域名，如：static.ctolog.cc"></el-input>
						       </el-form-item>
						 </el-col>
						 </el-row>
						 
						 <el-row>
						 <el-col :span="12">
						 <el-form-item label="访问密钥" >
						       <el-input v-model="form.q_secretkey" size="mini" placeholder="可以在 [ 七牛云 > 个人中心 ] 设置并获取到访问密钥"></el-input>
						       </el-form-item>
						 </el-col>
						 </el-row>
						 
						 <el-row>
						 <el-col :span="12">
						 <el-form-item label="安全密钥" >
						       <el-input v-model="form.q_key" size="mini" placeholder="可以在 [ 七牛云 > 个人中心 ] 设置并获取到安全密钥。"></el-input>
						       </el-form-item>
						 </el-col>
						 </el-row>
						 
					</el-form>
			   </el-tab-pane>
			   <el-tab-pane label="阿里云配置">
				   <el-form :model="form"  class="tabform" label-position="left" label-width="120px" >
				   
					 <el-row>
					 <el-col :span="12">
					 	<el-form-item label="空间名称" >
					 	  <el-input v-model="form.a_oss" size="mini" placeholder="填写OSS存储空间名称，如：oss"></el-input>
					 	  </el-form-item>  
					 </el-col>
					 </el-row>
					 <el-row>
					 <el-col :span="12">
					 	<el-form-item label="数据中心" >
					 	          <el-input v-model="form.a_http" size="mini" placeholder="填写OSS数据中心访问域名，如：oss-cn-shenzhen.aliyuncs.com"></el-input>
					 	          </el-form-item> 
					 </el-col>
					 </el-row>
					 
					 <el-row>
					 <el-col :span="12">
					 	<el-form-item label="访问域名" >
					 	      <el-input v-model="form.a_htpps" size="mini" placeholder="填写OSS存储外部访问域名，如：kyshop.oss-cn-shenzhen.aliyuncs.com"></el-input>
					 	      </el-form-item> 
					 </el-col>
					 </el-row>
					 
					 
					 <el-row>
					 <el-col :span="12">
					 	<el-form-item label="访问密钥" >
					 	      <el-input v-model="form.a_secretkey" size="mini" placeholder="可以在 [ 阿里云 > 个人中心 ] 设置并获取到访问密钥。"></el-input>
					 	      </el-form-item> 
					 </el-col>
					 </el-row>
					 
					 <el-row>
					 <el-col :span="12">
					 	<el-form-item label="安全密钥" >
					 	      <el-input v-model="form.a_key" size="mini" placeholder="可以在 [ 阿里云 > 个人中心 ] 设置并获取到安全密钥。"></el-input>
					 	      </el-form-item> 
					 </el-col>
					 </el-row>
					
					 
				   </el-form>
			   </el-tab-pane>
			   <el-tab-pane label="腾讯云配置">
				   <el-form :model="form"  class="tabform" label-position="left" label-width="120px" >
				   	 <el-row>
				   	 <el-col :span="12">
				   	 <el-form-item label="APPid" prop="appid">
				   	   <el-input v-model="form.appid" size="mini" placeholder="填写账户中心的 APPid"></el-input>
				   	 </el-form-item>
				   	 </el-col>
				   	 </el-row>
					 <el-row>
					 <el-col :span="12">
					 <el-form-item label="项目身份" >
					   <el-input v-model="form.w_key" size="mini" placeholder="填写开发者拥有的项目身份识别 ID"></el-input>
					 </el-form-item>
					 </el-col>
					 </el-row>
					 <el-row>
					 <el-col :span="12">
					 <el-form-item label="身份密钥" >
					   <el-input v-model="form.w_skey" size="mini" placeholder="填写开发者拥有的身份密钥"></el-input>
					 </el-form-item>
					 </el-col>
					 </el-row>
					 
					 <el-row>
					 <el-col :span="12">
					 <el-form-item label="所有地域" >
					   <el-input v-model="form.w_area" size="mini" placeholder="填写所有地域"></el-input>
					 </el-form-item>
					 </el-col>
					 </el-row>
					 
					 <el-row>
					 <el-col :span="12">
					 <el-form-item label="存储桶名称" >
					   <el-input v-model="form.w_name" size="mini" placeholder="填写COS中用于存储桶名称"></el-input>
					 </el-form-item>
					 </el-col>
					 </el-row>
					 
				 </el-form>	 
				   
			   </el-tab-pane>
			   
			   <el-button type="primary" size="mini" @click="submitSet">提交数据</el-button>
			 </el-tabs>
		</div>
		 
	</div>
</template>

<script>
	var _self;
	import Panle from '@/components/Panle'
	import {addFilesSet} from '@/api/files/files'
	export default{
		components:{
			Panle
		},
		data(){
			return{
				tabPosition: 'left',
				form:{
					farea: [],
				},
				rules:{
					farea:[
						{required: true, message: "请选择存储位置", trigger: "blur"}
					],
					allowexts: [
					  { required: true, message: "允许上传的文件类型", trigger: "blur" }
					],
					fileSize: [
					  { required: true, message: "允许上传文件的大小", trigger: "blur" }
					],
				}
			}
		},
		created() {
			_self = this;
		},
		methods:{
			submitSet:function(){
				console.log(_self.form);
				this.$refs['form'].validate((valid) =>{
				  if (valid) {
				    _self.addEditSet();
				  } else {
				    return false;
				  }
				});
			},
			addEditSet:function(){
				addFilesSet(_self.form).then((res)=>{
					if(res.code==200){
						_self.msgSuccess(res.msg)
						
					}else{
						_self.msgError(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.set-content{
		margin-top: 10px;
		.el-tabs--border-card{
			box-shadow: 0 0 0;
			border-color: #f1f1f1;
		}
		.el-tabs--border-card>.el-tabs__header{
			background-color:#f7f7f7;
			border-color: #f1f1f1;
		}
		.el-tabs__item{
			font-size: 12px;
		}
		.el-checkbox__label,.el-radio__label{
			font-size: 12px;
		}
	}
	.el-form-item__label{
		font-size: 12px;
	}
</style>
